<template>
  <div class="pages rechargeDetails">
    <div class="pageLevel" >
      <!-- 头部 -->
      <div class="content">
        <el-button style="margin:10px 0 10px 30px;" type="primary" @click="goBack()"> 返回</el-button>
        <div class="from_main infon">
          <div class="infon_text">
            <span class="infon_shu"></span>
            <span class="infon_text_t"> 充值流程</span>
          </div>
        </div>
        <div style="height:110px;margin-left:50px;margin-top:20px;">
          <el-steps direction="vertical" :active="1">
            <el-step title="使用银行网银向您绑定的中金账户汇款"></el-step>
            <el-step title="汇款到账后中金系统自动充入至账户中"></el-step>
          </el-steps>
        </div>
        <div class="from_main infon">
          <div class="infon_text">
            <span class="infon_shu"></span>
            <span class="infon_text_t"> 中金账户信息</span>
          </div>
        </div>
        <el-form style="margin:40px;" ref="form" :model="form" label-width="80px">
          <el-form-item label="银行户名:">
            <span>{{ruleForm.name}}</span>
          </el-form-item>
          <el-form-item label="银行账号:">
            <span>{{ruleForm.cltaccBnkeid}}</span>
          </el-form-item>
          <el-form-item label="开户行:">
            <span>{{ruleForm.cltaccOpenbknm}}</span>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import util from '@/util'
import { getAccountInfo } from "@/api";
export default {
  computed: mapState([
    "merchantId"
  ]),
  data() {
    const twoDecimal  = (rule, value, callback) => {
        if(!util.twoDecimal(value)) {
          return callback(new Error('数字,保留2位小数，请重新输入'));
        }  else {
          callback();
        }
      };
    return {
      value: this.val,
      aaa: 999,
      ruleForm: {
        name: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入提现金额", trigger: "blur" },
          { validator: twoDecimal, trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.getAccountInfo(); //账号信息
  },
  methods: {
    getAccountInfo() {
      let data = {
        orgId: this.merchantId
      };
      getAccountInfo(data).then(res => {
        this.ruleForm.name = res.data.accountName;
        this.ruleForm.cltaccBnkeid = res.data.cltaccBnkeid;
        this.ruleForm.cltaccOpenbknm = res.data.cltaccOpenbknm;
      });
    },
    goBack() {
      history.back();
    }
  }
};
</script>
<style scoped>
.rechargeDetails span {
  color: #606266;
}
</style>

